import './index.less';

import React, { useState } from 'react';

import DynamicIcon from '@/components/DynamicIcon';

import BackgroundMusic from './BackgroundMusic';
import BackgroundScene from './BackgroundScene';
import ModeButton from './ModeButton';
import Portfolio from './Portfolio';

const Home = () => {
  const [show, setShow] = useState(false);

  const onClickGame = () => {
    setShow(!show);
  };

  return (
    <div className="home">
      <BackgroundMusic show={show} />
      <BackgroundScene />
      <ModeButton />
      {!show && <Portfolio />}
      <div className="game-btn" onClick={onClickGame}>
        <DynamicIcon name="airplane" width="24" height="24" />
      </div>
    </div>
  );
};

export default Home;
